<template>
	<view>
		<view class="cu-custom" :style="[{ height: customBar + 'px' }]">
			<view class="cu-bar u-flex u-row-between" :class="{ fixed: isFixed }" :style="[style]">
				<view class="action u-flex" @tap="goBack" v-if="isBack">
					<u-icon name="arrow-left" :color="backIconColor" :size="backIconSize"></u-icon>
					<view class="u-back-text u-line-1 u-m-l-20" v-if="backText" :style="[backTextStyle]">{{ backText || '' }}</view>
				</view>
				<view class="content" :style="[{ top: statusBarHeight + 'px' }]"><slot name="content"></slot></view>
				<slot name="right"></slot>
				<text
					v-if="showGongNeng"
					:style="{'color':gongnengColor}"
					style="text-align:  right;padding-right: 20rpx;font-size: 28rpx"
				>
					<!-- #ifndef MP -->
					<view class="action" @tap="showModal('menu')">
						<text class="wlIcon-gengduo"></text>
						<!-- {{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}} -->
						<view
							class="cu-tag badge bg-orange"
							v-if="
							statistics.notice.notice +
								statistics.notice.order +
								statistics.notice.chat +
								statistics.order.pay +
								statistics.order.delive +
								statistics.order.receiving +
								statistics.order.evaluate +
								cart.cartnum >
								0
						"
						></view>
					</view>
					<!-- #endif -->
				</text>
			</view>
			<!-- 模态框 -->
			<view class="WANL-MODAL">
				<view
					class="cu-modal top-modal"
					style="z-index: 110000;"
					:class="modalName == 'menu' ? 'show' : ''"
					@tap="hideModal"
				>
					<view class="wanl-modal-menu cu-dialog" @tap.stop="">
						<wanl-direct @change="hideModal" />
					</view>
				</view>
				<!-- 分享 -->
				<view
					class="cu-modal bottom-modal"
					:class="modalName == 'share' ? 'show' : ''"
					@tap="hideModal"
				>
					<view class="cu-dialog" @tap.stop="">
						<wanl-share
							:scrollAnimation="scrollAnimation"
							shareTitle="我发现了一个很好的线上购物商城，这是商城类目"
							shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱"
							:image="$wanlshop.appstc('/common/logo.png')"
							:href="common.appConfig.domain + '/pages/category?QRtype=category'"
							@change="hideModal"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
/**
 * shopro-navbar -自定义标题栏
 * @property {Boolean} isBack = [true] - 是否显示返回按钮
 * @property {Booelan} isFixed = [true] - 是否开启定位
 */

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
export default {
	name: 'shopro-tabbar',
	data() {
		return {
			statusBarHeight: systemInfo.statusBarHeight,
			modalName: null,
			scrollAnimation: 300
		};
	},
	computed: {
		...mapState(['common', 'statistics', 'cart']),
		// tabbar样式
		style() {
			let statusBarHeight = systemInfo.statusBarHeight;
			let style = {};
			style.height = `${this.customBar}px`;
			style.paddingTop = `${statusBarHeight}px`;
			Object.assign(style, this.background);
			return style;
		},
		// 高度
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	props: {
		showGongNeng:{
			type: Boolean,
			default: false
		},
		gongnengColor:{
			type: String,
			default: '#000'
		},
		isBack: {
			type: Boolean,
			default: true
		},
		isFixed: {
			type: Boolean,
			default: true
		},
		background: {
			type: Object,
			default() {
				return {
					background: '#ffffff'
				};
			}
		},
		// 返回箭头的颜色
		backIconColor: {
			type: String,
			default: '#000'
		},
		// 左边返回的图标
		backIconName: {
			type: String,
			default: 'arrow-left'
		},
		// 左边返回图标的大小，rpx
		backIconSize: {
			type: [String, Number],
			default: '22'
		},
		// 返回的文字提示
		backText: {
			type: String,
			default: ''
		},
		// 返回的文字的 样式
		backTextStyle: {
			type: Object,
			default() {
				return {
					color: '#606266'
				};
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 300;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				this.modalName = null;
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.cu-custom {
	width: 100%;
}
.cu-bar {
	width: 100%;
	.content {
		display: flex;
		flex-direction: row;
		flex: 1;
		align-items: center;
		pointer-events: auto;
	}
}
</style>
